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Hanya ada text dan floating button 

Buat seprti ini dahulu 

Kemudian buka 

Lalu cari 
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A composable, Future-based library for making HTTP requests Publisher 
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This package contains a set of high-level functions and classes that make it easy to consume HTTP 
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i NANA 
Using 
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Maka dia akan get package 
Kalua sudah selsai tingall import 
Go Run Terminal Help e main.dart - http request - Visual Studio Co. 
+ Oo @ 
Q Signin Help 


{} dart:html 


m package: 
void mair@ package: 
runAppi& package: 

& package: 
& package: 


} 


lz package: 
const NG package: 
m package: 


@overr: & package: 
| m package: 
retu package: 
home: 


Home 


WE: 


OUTLINE 
TIMELINE 


DEPENDENCIES 


Le. 


» Cc 3. 6a o 


http/ 
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http/http.dart 
http/io client.dart 
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Sbelum kita membuat aplikasi 

Bahas ide dahulu 

Ketika diklik button maka datanya akan muncul 

Data dari mana 

Dari situs ini 
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{JSON} Placeholder 


Free fake API for testing and prototyping. 
Powered by JSON Server + LowDB. Tested with XV. 


As of Oct 2021, serving ~1.7 billion requests each month. 
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Buka situs ini 

Situs membuat Fake API atau API bohong2an sudah disiap kan dari json placholder 
Dgn ini kita bisa membuat praktek tidak harus membuat dahulu 


Disini sudah ada simple 
Disini sudah ada metode nya sudah lengkap 
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All HTTP methods are supported. You can use http or https for your requests. 
GET ¿posts 
GET Lposts/1 
GET Lposts/1/comments 
GET /comments?postid-1 


POST /posts 

PUT /posts/1 
PATCH /posts/1 
DELETE /posts/1 


Note: see guide for usage examples. 
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Ini dipakai satu persatu 

Tinggal pakai 

Databse ini tidak bisa diubah tidak bisa dihapus 
Ini hanya method aja atau bahan praktek 

Yg pertama bahas method get 

Kita bisa pakai data apa 
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JSONPlaceholder comes with a set of 6 common resources: 
posts 100 posts 
7 
/comments 500 comments 
¿albums 100 albums 
/photos 5000 photos 
/todos 200 todos 
Lusers 10 users 


Note: resources have relations. For example: posts have many comments, albums have many photos, 
list. 
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Ada post commet dll 

Tapi kita pakai data users 

Klik users ini method nya get 

Jika diklik maka muncul semua data user ada 10 
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phone”: “(254)954-1289", A 
"website": "demarco.info", 
"company": { 
"name": "Keebler LLC", 
"catchPhrase": "User-centric fault-tolerant solution", 
"bs": "revolutionize end-to-end systems" 
} 
b 
{ : 
"id": 6, 
"name": "Mrs. Dennis Schulist”, 


"username": "Leopoldo Corkery", 
"email": "Karley Dach@jasper.info", 
"address": ( 
"street": "Norberto Crossing", 
"suite": "Apt. 950", 
"city": "South Christy", 
"zipcode": "23505-1337", 
"geo": ( 
"lat": "-71.4197", 
"Ing": "71.7478" 


i, 
"phone": "1-477-935-8478 x643e", 
"website": "ola.org", 
"company": { 
"name": "Considine-Lockman", 
"catchPhrase": "Synchronised bottom-line interface", 
"bs": "e-enable innovative applications" 
) 
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"name": "Kurtis Weissnat", 
"username": "Elwyn.Skiles", 
"email": "Telly.Hoeger@billy.biz", 
"address": { 
"street": "Rex Trail", 
+a 200" 
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Ada 10 users ini data yg dipakai nanti 

Tetapi kita tidak menampilkan semua data 

Pada video ini hanya menampilkan sigle atau satu data 

Kedepan bahas semua data tapi kalai ini ada menampilkan satu data 
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"id": 
"name": “Leanne Graham", 
"username": "Bret", 
"email": "Sincere@april.biz", 
1 
"Kulas Light", 
Apt. 556", 
"1 "Gwenborough", 
1 "92998-3874", 
1 "-37.3159", 
": "81.1496" 
1-770-736-8031 x56442", 
hildegard.org", 
:{ 
: "Romaguera-Crona", 
"catchPhrase": "Multi-layered client-server neural-net", 
"bs": “harness real-time e-markets" 
) 
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Tapi sebelumya 

Text no data 
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Sudah bungkus string body 

Di floating onprssed kita buat getData 
Kemudian buat function disini 


Run 


HTTP REQUEST 
MM dart to 

idea 

Mm and 

@ build 

& ios 

ð lib 

& maindart 


By test 
e 
= 


gitignore 


OUTLINE 
TIMELINE 
DEPENDENCIES 


ic. € | 


e main.dart - http request - Visual Studio Co. 


Terminal 


Help 
& main.dart 


@override 
te<HomeP 


s _HomePa extends State<Ho 


String body 


H 


void getData(){ 


| 
} 


No Data 
@override 

Widget build(BuildContext context) { 
( 
floatingActionButton: 


return Scaffol 


Float tionButton( 


DEBUG CONSOLE 


Reloaded 29 of 654 libraries in 1,185ms 


D/EGL emulation(29065): app time stats: avg=298489.8ims min 


489.81ms count=1 
Reloaded 1 of 654 


a 
raries in 784ms 


D/EGL emulation( app time stats: avg=268345.09ms min-268345.09ms m 


68345.89ms count=1 


nri Kena | | 


Kita get data yg ini 


"name": "Clementine Bauch", 

"username": "Samantha", 

"email": "Nathan@yesenia.net", 
"sf 

": “Douglas Extension", 

"Suite 847", 

McKenziehaven", 

“zipcode": "59590-4157", 


"geo": { 
"lat": "-68.6102", 
"Ing": "-47.0653" 
} 
bo 
"phone": "1-463-123-4447", 
"website": "ramiro.info", 
"company": { 
"name": "Romaguera-Jacobson", 
"catchPhrase": "Face to face bifurcated interface", 
"bs": "e-enable strategic applications" 
) 
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Sebelumnya kita copy url terlebih dahulu 
Untuk men get data dgn method get 


Cara nya 
.get ini membutuhkan Uri membutuhkan url yg dicopy tadi 
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Ketika kita get membuthkan waktu tunggu 
Tunggu internet lemot atau cepat 
Kalua lemat maka lama membutuhkan waktu 


Maka harus menambah await data yg di tunggu kalua internet lagi lama 


Ketika pakai await maka di tambah asycn 
Maka function menjadi asycoronus 

Kita bungkus http.respo kedalam variable 
Kita print disni isinya apa 


Maka myResponse isi nya bganyak maka kita tampilkan statusCode terdahulu 


Save lalu jalankan 
Ketika di klik floating button 
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Maka status code menampilkan 200 
Ketika sukses mengambil data itu statusCode 200 


Kalua kita berhasil mendapatkan data maka status code itu 200 
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Maka data sudah masuk 
Sudah berhasil 
Tapi dalam bentuk respon 


Kita tidak butuh data nya seperti atau mentah 


Kita akan convert dalam Map 
Buat map namanya data 


Untuk menconvert ini mengunakan nama nya jsonDecode 
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€ Parses the string and returns the 


' resulting Json object. 
Ia build 


mks The optional [reviver] function is called 

- once for each object or list property 
that has been parsed during decoding. 
The key argument is either the integer 

; list index for a list property, the string 

gitig map key for object properties, or null 


© met: for the final result. 


y The default [reviver] (when not 
provided) is the identity function 


Shorthand for json.decode . Useful if 


EAC a local variable shadows the global 
[json] constant. 
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jsonEncode(...) 
JsonCodec(...) 
JsonCodec.withReviver/(...) 
JsonCyclicError(...) 
JsonDecoder (...) 
JsonEncoder (...) 
JsonEncoder.withIndent (...) 
JsonUnsupportedObjectError(...) 
JsonUtf8Encoder (...) 
JsonCodec 
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void main() 4 
runApp (My 
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build(Buildc xt context) { 


return MaterialAp 


id" 
name lementine Bauch", 
"username": “Samantha” 
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Json ini sepeti map memiliki key dan value 
Apa yg kita convert yaitu myrespon 
Lalu kita print data 
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void getData() 
var myResponse = 
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Map<String, dynamic» data jsonDecode 
(myResponse. body) ; 


print (data); 
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Maka sudah berbentuk object 

Data yg kita pakai yg sudah digoreng atau menconvert dgn json 

Data ini akan ditampilkann ke body 

Body ubah dgn data 

Body bentuk string 


Jgn lupa mengunakan setState 
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var myResponse = await http 
.get(Uri.parse( 
)); 


Map<String, dynamic> data = jsonDecode 
(myResponse.body): 


setState(() ( 
body = data.toString(); 
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Widget build(BuildContext context) { 
return Scaffold( 
floatingActionButton: FloatingActionButton( 
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StatelessWidget { 
({Key? key}) : (key: key); 


myApp 


@override 
Widget (BuildContext context) { 
MaterialApp( 
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